<template>
    <div>
        <div class='crumbs'>
            <el-breadcrumb separator='/'>
                <el-breadcrumb-item>
                    <i class='el-icon-lx-cascades'></i> 选课管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class='container'>
            <div class='handle-box'>
<!--                <el-select clearable v-model='query.semester' placeholder='学期' class='handle-select mr10'>-->
<!--                    <template v-for='item in semesters'>-->
<!--                        <el-option key='1' :label='item' :value='item'></el-option>-->
<!--                    </template>-->
<!--                </el-select>-->
<!--                <el-select clearable v-model='query.courseName' placeholder='课程' class='handle-select mr10'>-->
<!--                    <template v-for='item in courseNames'>-->
<!--                        <el-option key='1' :label='item' :value='item'></el-option>-->
<!--                    </template>-->
<!--                </el-select>-->
<!--                <el-button type='warning' icon='el-icon-lx-filter' @click='handleFilter' class='btn'></el-button>-->
<!--                <div style='width: 20px; display: inline-block'></div>-->
<!--                <el-input v-if='role === "supervisor"' v-model='query.studentName' placeholder='学生姓名' class='handle-input mr10' style='width: 100px'></el-input>-->
<!--                <el-button v-if='role === "supervisor"' type='warning' icon='el-icon-search' @click='handleFilter' class='btn'></el-button>-->
<!--                <el-button type='warning' icon='el-icon-refresh' @click='load_status' style='position: absolute; right: 60px' class='btn'></el-button>-->
                <el-form v-model="form" style="text-align: left" ref="dataForm">
                    <el-form-item label="班级编号" :label-width="formLabelWidth" prop="probName">
                        <el-input v-model="form.classId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="课程编号" :label-width="formLabelWidth" prop="probName">
                        <el-input v-model="form.courseId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="教师编号" :label-width="formLabelWidth" prop="probName">
                        <el-input v-model="form.teacherId" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="学期" :label-width="formLabelWidth" prop="probSchool">
                        <el-input v-model="form.semester" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-button type='warning' @click='handleSubmit' style='position: absolute; right: 120px' class='btn'>添加/更新</el-button>
                    <el-button type='warning' @click='handleSubmit' style='position: absolute; right: 60px' class='btn'>删除</el-button>
                    <div style='width: 20px; display: inline-block'></div>
                </el-form>
            </div>
<!--            <el-table-->
<!--                :data='tableData'-->
<!--                border-->
<!--                class='table'-->
<!--                ref='multipleTable'-->
<!--                header-cell-class-name='table-header'-->
<!--                @selection-change='handleSelectionChange'-->
<!--            >-->
<!--                <el-table-column prop='classId' label='班级编号' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='courseId' label='课程编号' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='studentId' label='学号' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='studentName' label='姓名' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='courseName' label='课程名' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='time' label='课程学时' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='credit' label='课程学分' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='type' label='考试/考察' width='105' align='center'></el-table-column>-->
<!--                <el-table-column prop='semester' label='学期'></el-table-column>-->
<!--                <el-table-column>-->
<!--                    <template #default='scope'>-->
<!--                        <el-button type='warning'-->
<!--                                   @click='editCourse(scope.row)'-->
<!--                                   class='btn'>-->
<!--                            <div style='font-family: "黑体"; font-size: 10px'-->
<!--                            >更新-->
<!--                            </div>-->
<!--                        </el-button>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column>-->
<!--                    <template #default='scope'>-->
<!--                        <el-button type='danger'-->
<!--                                   @click='formVisible2=true; id = scope.row.id; deleteName = scope.row.name'-->
<!--                                   class='btn'>-->
<!--                            <div style='font-family: "黑体"; font-size: 10px'-->
<!--                            >删除-->
<!--                            </div>-->
<!--                        </el-button>-->
<!--                        <el-dialog title='提示' :visible.sync='formVisible2' :append-to-body='true'-->
<!--                                   width='30%'>-->
<!--                            确认删除{{ deleteName }}吗？-->
<!--                            <div slot='footer' class='dialog-footer'>-->
<!--                                <el-button type='info' @click='formVisible2 = false' class='btn'-->
<!--                                           style='background-color: #8c939d'>取 消-->
<!--                                </el-button>-->
<!--                                <el-button type='warning' @click='handleDelete' class='btn'>确 认</el-button>-->
<!--                            </div>-->
<!--                        </el-dialog>-->
<!--                    </template>-->
<!--                </el-table-column>-->
<!--            </el-table>-->
            <div class='pagination'>
                <el-pagination
                    background
                    layout='total, prev, pager, next'
                    :current-page='query.pageIndex'
                    :page-size='query.pageSize'
                    :total='pageTotal'
                    @current-change='handlePageChange'
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
// import CodeDetail from '@/components/common/CodeDetail';
import Qs from 'qs'
export default {
    name: 'courseSelectUpdate',
    data() {
        return {
            query: {
                studentName: '',
                teacherName: '',
                courseName: '',
                semester: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            semesters: [],
            courseNames: [],
            multipleSelection: [],
            delList: [],
            editVisible: false,
            pageTotal: 0,
            form: {
                classId: '',
                courseId: '',
                semester: '',
            },
            idx: -1,
            id: -1
        };
    },
    mounted:function(){
        this.load_status()
    },
    methods: {
        load_status() {
            let _this = this
            this.$axios.get('/semesters').then(resp => {
                if(resp && resp.status === 200) {
                    _this.semesters = resp.data
                }
            })
            this.$axios.get('/courseInfo/class').then(resp => {
                if(resp && resp.status === 200) {
                    _this.tableData = resp.data
                }
            })
            this.$axios.get('/course-names').then(resp => {
                if(resp && resp.status === 200) {
                    _this.courseNames = resp.data
                }
            })
        },
        // 触发搜索按钮
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.$axios.get("/status/" + this.query.name + "/person").then(resp => {
                if(resp && resp.status === 200) {
                    this.tableData = resp.data
                }
            })
        },
        handleFilter() {
            this.$set(this.query, 'pageIndex', 1);
            let _this = this
            let semester = this.query.semester
            let courseName = this.query.courseName
            let id = localStorage.getItem("ms_userid");
            let role = this.role
            let studentName = this.query.studentName
            let teacherName = this.query.teacherName
            this.$axios.post('/gradeInfo/filter', Qs.stringify({
                "id": id,
                "courseName": courseName,
                "semester": semester,
                "type": role,
                "studentName": studentName})).then(resp => {
                if(resp && resp.status === 200) {
                    _this.tableData = resp.data
                }
            }).then(resp => {
                if(resp && resp.status === 200) {
                    this.$message.success("成功")
                }
                else {
                    this.$message.warning("失败")
                }
            })
        },
        handleSubmit() {
            let _this = this
            console.log(this.form.semester)
            this.$axios.post("/addClassCourse", {
                classId: _this.form.classId,
                courseId: _this.form.courseId,
                semester: _this.form.semester
            }).then(resp => {
                if(resp && resp.status === 200) {
                    this.$message.success("成功")
                }
                else {
                    this.$message.warning("失败")
                }
            })
        }
    },
    computed: {
        role() {
            return localStorage.getItem("ms_character");
        }
    },
    components: {
        // CodeDetail
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    /*font-size: 14px;*/
}

.mr10 {
    margin-right: 10px;
}

</style>
